<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            background-color: pink;
        }
        * {
            padding: 0;
            margin: 0;
        }
        .box {
            width: 700px;
            height: 50px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            margin: 0 auto;
            margin-top: 200px;
        }
        input {
            width: 150px;
            height: 50px;
            border: 1px solid #ccc;
            color: white;
            text-align: center;
            line-height: 50px;
            font-size: 20px;
        }
        input:nth-child(1){
            background-color: rgb(12, 199, 74);
            border-radius: 10px;
        }
        input:nth-child(2){
            background-color: rgb(15, 152, 49);
            border-radius: 10px;
        }
        input:nth-child(3){
            background-color: rgb(6, 97, 36);
            border-radius: 10px;
        }
        input:nth-child(4){
            background-color: rgb(9, 234, 73);
            border-radius: 10px;
        }
        .move {
            position: absolute;
            width: 150px;
            height: 50px;
            border: 1px solid rgb(124, 14, 86);
            top: -80px;
            left: 50%;
            transform: translate(-50%);
            text-align: center;
            line-height: 50px;
            color: white;
        }
        .close {
            position: absolute;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: pink;
            top: 16px;
            left: 10px;
            font-size: 10px;
            line-height: 20px;
            cursor: pointer;
        }
        .big{
            color: rgb(82, 113, 20);
            font-size: 20px;
            margin: 0 auto;
            margin-top: 100px;
            /* border: 1px solid red; */
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="big">点击调用提示</div>
    <div class="box">
        <input type="button" value="信息提醒">
        <input type="button" value="成功提示">
        <input type="button" value="警告提示">
        <input type="button" value="失败提示">
    </div>
    <div class="move">
    </div>
    <script>

           //  this.Message.prototype.type=functiona fun(e)
    //     e.this.type.div,{
    //         // type.innerHTML=this

    //     }
    //fun(inter)
    // Tab.prototype.setIndex = function(){
    //     this.btns.forEach((val,idx)=>{
    //         val.index = idx;
    //     })
    // }
    // 属性====变量
        // 选择到的元素
          function Message(ops={}){
        this.type=ops.type;
    this.text=ops.text;
            this.duration=undefined?0:ops.duration; this.showClose=undefined?false:ops.showClose;
    this.center=undefined?false:ops.center;
            this.onClose=ops.onClose;  this.color; this.findColor(this.type);this.moveEvent()
            
        }
    //     odanger.onclick=function(){
    //     new Message({
    //         text:'失败提示',
    //         type:'error'
    //     })
    //  }
     
    //  oinfo.onclick = function(){
    //     alert('成功提示')
        
    //  }
    //  osuccess.onclick = function(){
    //     alert('知道了')
        
    //  }
    //  owarning.onclick = function(){
    //     alert('失败提示')
        
    //  }
    //  odanger.onclick = function(){
    //     alert('成功提示')
        
    //  }
        Message.prototype.moveEvent=function(){
        //调用调试   获取方式
            this.moveEvent=document.querySelector('.move'); this.moveEvent.style.top=-80+'px'
            this.moveEvent.style.background=this.color
            // 给当前添加:that.setActive(this.index)
            //  let now = parseInt(getStyle(ele, attr));
            this.moveEvent.innerHTML=this.text; if(!this.showClose){ this.close=document.createElement('div');this.close.className='close'
 this.close.innerHTML='x'
        this.moveEvent.appendChild(this.close) }
            let that=this
            //尝试获取一份之前的样式
           // console.log(oveEvent)
            move(this.moveEvent,{
                top:200
            },function(){
                //console.log(function)
                if(that.showClose){
                    // 将本次索引设置为下一次的上一个:
                    that.moveEvent.style.top=-80+'px'
                }else {
                    that.close.onclick=function(){
                        that.moveEvent.style.top=-80+'px'
                    }} })  }
                    //console.log(moveEvent)
        Message.prototype.findColor=function(type){
            if(type==='warning'){
                this.color='orange'
            }
            if(type==='error'){
                this.color='red'
            }
            if(type==='info'){
                this.color='#ccc'
            }
            if(type==='success'){ this.color='green'}}
        console.log(this)
        const owarning={
            text:'警告提示',
            type:'warning',
            duration:0,
            showClose:true,
            // 执行的功能是不确定的，传参，传的是功能
                // 根据是否传入回调函数，决定执行或不执行
            center:true, onClose:function(){
                alert('知道了')
            }}
        const odanger={
            text:'失败提示',
            type:'error',
        }; const osuccess={
            text:'成功提示',
            type:'success',
        }
        const oinfo={
            text:'信息提示',
            type:'info',}
        const btns=document.querySelectorAll('input')
for(let i=0;i<btns.length;i++){
            //console.log(btns)
            let index=i
            btns[i].onclick=function(){
                if(index===0){
                    new Message(oinfo)
                }else if(index===1){
                    new Message(osuccess)
                }else if(index===2){
                    new Message(owarning)}else if(index===3){
                    new Message(odanger)
                }
            }
        }
        
        function move(ele, obj, callback){
            clearInterval(ele.time);
            ele.time = setInterval(()=>{ let flag = true;
                for(let i in obj){ let now = i==="opacity" ? getStyle(ele, i)*100 : parseInt(getStyle(ele, i));
                //来一次判断，判断是否正确
              let speed = (obj[i] - now) / 10; speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);ele.style[i] = i==="opacity" ? (now+speed)/100 : now+speed+"px";
                    if(now !== obj[i]) flag = false;}     if(flag){
             clearInterval(ele.time); callback && callback();
                }
            }, 30); }
        function getStyle(ele, attr){
            return getComputedStyle ? getComputedStyle(ele)[attr] : ele.currentStyle[attr];
        }
    </script>
</body>
</html>